import { useCallback } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd'
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useRecoilValue } from 'recoil'
import { settingState } from '../../store'

import MyHeader from './header'
import './frame.less'

const { Content } = Layout

interface IProps {
  menu?: any,
  children?: any
}

export default function Frame (props: IProps) {
  // 全屏
  const handleFullScreen = useFullScreenHandle();
  const theme = useRecoilValue(settingState.themeAtom)

  // const toggleFullScreen = useCallback((state, handle) => {
  //   if (handle === handleFullScreen) {
  //     console.log('Screen 1 went to', state, handle);
  //   }
  // }, [handleFullScreen]);

  return (
    <FullScreen handle={ handleFullScreen } >
      <Layout style={{ height: '100vh' }}>
        {/* 页头 */}
        <MyHeader 
          menu={ props.menu } 
          handleFullScreen={ handleFullScreen } 
          theme={ theme }
        />
        <Layout>
          {/* 左侧导航 */}
          {/* <MyLeftSide menu={ props.menu } /> */}

          {/* 主内容 */}
          <Layout style={{ overflowY: 'auto' }}>
            <Content style={{ background: '#fff', margin: 0 }} >
              <Outlet />
              {props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    </FullScreen>
  )
}
